<template>
	<view class="ChatList">
		<!-- 时间 -->
		<view class="time" v-if="item.time">{{ item.getstime }}</view>
		<!-- 聊天列表 -->
		<view class="chat-item-wrap" v-if="!item.isme">
			<view class="chat-pic"><image :src="item.userpic" mode="widthFix"></image></view>
			<view class="chat_contxet">
				<text class="invite1">{{ item.data }}</text>
				<image v-if="item.type === 'img'" class="pic_user" :src="item.data"></image>
			</view>
		</view>
		<!-- 右侧聊天列表 -->
		<view class="right_chat_list" v-if="item.isme">
			<view class="chat_contxet">
				<text class="invite1" v-if="item.type === 'text'">{{ item.data }}</text>
				<image v-if="item.type === 'img'" class="pic_user" :src="item.data"></image>
			</view>
			<view class="chat_pic"><image :src="item.userpic" mode="widthFix"></image></view>
		</view>
	</view>
</template>

<script>
export default {
	props: ['item'],
	data() {
		return {};
	},
	methods: {}
};
</script>

<style lang="less" scoped>
.chat-item-wrap {
	padding: 20rpx;
	display: flex;
	justify-content: flex-start;
	.chat-pic {
		image {
			height: 100rpx;
			width: 100rpx;
			border-radius: 50%;
		}
	}
	.chat_contxet {
		margin-left: 20rpx;
		font-size: 25rpx;
		border-radius: 20rpx;
		background-color: #f4f4f4;
		padding: 15rpx;
		position: relative;
		display: flex;
		align-items: center;
		margin-right: 100rpx;
	}
	.invite1 {
		line-height: 30rpx;
	}
	.chat_contxet::after {
		content: '';
		position: absolute;
		left: -25rpx;
		top: 8rpx;
		height: 0;
		width: 0;
		border: 16rpx solid transparent;
		border-right-color: #f4f4f4;
	}
}
.right_chat_list {
	display: flex;
	justify-content: flex-end;
	.chat_pic {
		image {
			height: 100rpx;
			width: 100rpx;
			border-radius: 50%;
		}
	}
	.chat_contxet {
		margin-left: 20rpx;
		font-size: 25rpx;
		border-radius: 20rpx;
		background-color: #f4f4f4;
		padding: 15rpx;
		position: relative;
		display: flex;
		align-items: center;
		margin-right: 15rpx;
	}
	.chat_contxet::after {
		content: '';
		position: absolute;
		right: -25rpx;
		top: 8rpx;
		height: 0;
		width: 0;
		border: 16rpx solid transparent;
		border-left-color: #f4f4f4;
	}
}
.pic_user {
	max-width: 350rpx;
	max-height: 250rpx;
}
.time {
	color: #cccccc;
	text-align: center;
	padding: 15rpx 0;
}
</style>
